<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改服务预约订单')" />
    <th:block th:include="include :: select2-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-serverOrder-edit" th:object="${webServerOrder}">
            <input name="id" th:field="*{id}" type="hidden">
            <input name="deptId"  type="hidden"  th:field="*{deptId}"/>
            <input name="userId"  type="hidden"  th:field="*{userId}"/>
            <input name="recycleTypeId" type="hidden" th:field="*{recycleTypeId}"/>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">用户：</label>
                <div class="col-sm-8">
                    <div class="input-group">
                        <input name="name" th:field="*{name}" th:attr="data-id=*{userId}" class="form-control" type="text" required>
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">预约项目：</label>
                <div class="col-sm-8">
                    <div class="input-group">
                        <input name="recycleType" th:attr="data-id=*{recycleTypeId}" th:field="*{recycleType}" class="form-control" type="text">
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">状态：</label>
                <div class="col-sm-8">
                    <div class="radio-box" th:each="dict : ${@dict.getType('server_order_status')}">
                        <input type="radio" th:id="${'status_' + dict.dictCode}" name="status" th:value="${dict.dictValue}" th:field="*{status}">
                        <label th:for="${'status_' + dict.dictCode}" th:text="${dict.dictLabel}"></label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">门店：</label>
                <div class="col-sm-8">
                    <div class="input-group">
                        <input class="form-control" readonly type="text" name="deptName" onclick="selectDeptTree()" id="treeName" th:field="*{deptName}" required>
                        <span class="input-group-addon"><i class="fa fa-search"></i></span>
                    </div>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">预约日期：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <input name="preDay" th:field="*{preDay}"  class="form-control" placeholder="yyyy-MM-dd" type="text" required>
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>

            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">预约时间：</label>
                <div class="col-sm-8">
                    <select name="preTime" class="form-control m-b" required>
                        <option th:each="dict : ${listServerTime}" th:text="${dict}" th:value="${dict}" th:field="*{preTime}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">预约技师：</label>
                <div class="col-sm-8">
<!--                    <input name="serverUserId" th:field="*{serverUserId}" class="form-control number" type="text">-->
                    <select name="serverUserId" class="form-control m-b" required>
                        <option th:each="dict : ${listServerUser}" th:text="${dict.realname}" th:value="${dict.id}" ></option>
                    </select>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-offset-5 col-sm-10">
                    <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>&nbsp;
                    <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
                </div>
            </div>

        </form>
    </div>


    <th:block th:include="include :: footer" />
    <th:block th:include="include :: bootstrap-suggest-js" />
    <th:block th:include="include :: datetimepicker-js" />
    <th:block th:include="include :: select2-js" />

    <script th:inline="javascript">
        var prefix = ctx + "system/serverOrder";
        $("#form-serverOrder-edit").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                var userId = $("#name").attr("data-id");
                $("#userId").val(userId);

                var recycleTypeId = $("#recycleType").attr("data-id");
                $("#recycleTypeId").val(recycleTypeId);
                $.operate.saveTab(prefix + "/edit", $('#form-serverOrder-edit').serialize());
            }
        }

        var listRecycleType = [[${listRecycleType}]];
        if(typeof listRecycleType =="string"){
            listRecycleType = eval(listRecycleType);
        }

        var values=[];
        for(var index in listRecycleType){
            var val = {};
            val.id = listRecycleType[index].id;
            val.name = listRecycleType[index].name;
            values.push(val);
        }
        //data 数据中获取
        $("#recycleType").bsSuggest("init",{
            idField: "id",
            keyField: "name",
            clearable: true,
            effectiveFields:["name"],
            effectiveFieldsAlias:{name: "姓名"},
            data: {
                'value': values
            }
        })

        var users = [[${users}]];
        if(typeof users =="string"){
            users = eval(users);
        }

        values=[];
        for(var index in users){
            var val = {};
            val.userId = users[index].id;
            val.realname = users[index].realname;
            values.push(val);
        }
        //data 数据中获取
        var testdataBsSuggest = $("#name").bsSuggest({
            idField: "userId",
            keyField: "realname",
            data: {
                'value': values,
                'defaults': 'http://www.baidu.vip'
            }
        });

        /* 用户管理-修改-选择部门树 */
        function selectDeptTree() {
        	var deptId = $.common.isEmpty($("#deptId").val()) ? "100" : $("#deptId").val();
            var url = ctx + "system/dept/selectDeptTree/" + deptId;
		    var options = {
				title: '选择门店',
				width: "380",
				url: url,
				callBack: doSubmit
			};
			$.modal.openOptions(options);
		}


        function doSubmit(index, layero){
            var body = layer.getChildFrame('body', index);
            var deptId = body.find('#treeId').val();
               $("#deptId").val(deptId);
               $("#treeName").val(body.find('#treeName').val());
                $("select[name='preTime']").empty();
                $.get(ctx+"system/dept/getDeptById", {"deptId":deptId}, function(result) {
                   var selectValues = result.data.times.split(",");
                   for (key in selectValues) {
                        if (typeof (selectValues[key]) == 'string') {
                             $("select[name='preTime']").append('<option value="' + selectValues[key] + '">' + selectValues[key] + '</option>');
                        }
                    }
                    layer.close(index);
                });

                $.get(ctx+"system/serverOrder/getServerListByAjax", {"deptId":deptId}, function(result) {
                   var selectValues = result.data;
                    $("select[name='serverUserId']").empty();
                   for (key in selectValues) {
                        $("select[name='serverUserId']").append('<option value="' + selectValues[key].id + '">' + selectValues[key].realname + '</option>');
                    }
                    layer.close(index);
                });




        }

		$("input[name='preDay']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });
    </script>
</body>
</html>